import { 
  AmbientLight,
  Clock,
  PerspectiveCamera,
  Scene, 
  SpotLight, 
  WebGLRenderer
} from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import * as chroma from 'chroma-js';
import setRandomColors from '../../utils/setRanndomColors';
import stats from '../../utils/stats';
// 调用
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls';

let clock = new Clock();
let scene = new Scene();
let camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

const renderer = new WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const ambientLight = new AmbientLight(0xeeeeee);
scene.add(ambientLight);

// 添加聚光灯
let spotLight = new SpotLight('#ffffff')
spotLight.position.set(-40, 60, -10)
spotLight.castShadow = true
spotLight.shadow.camera.near = 1
spotLight.shadow.camera.far = 100
scene.add(spotLight)
// scene.add(new SpotLightHelper(spotLight))


// 设置 https://threejs.org/docs/index.html#examples/zh/controls/FlyControls
const fpControls = new FirstPersonControls(camera, renderer.domElement);
// 环视速度。默认为0.005。
fpControls.lookSpeed = 0.04;
// 移动速度。默认为1。
fpControls.movementSpeed = 5;
// 是否能够垂直环视。默认为true。
// fpControls.lookVertical = false;
// 垂直环视是否约束在[.verticalMin, .verticalMax]之间。默认值为false。
fpControls.constrainVertical = true;
// 你能够垂直环视角度的上限。范围在 0 到 Math.PI 弧度之间。默认为Math.PI。
fpControls.verticalMax = 2.0;
// 你能够垂直环视角度的下限。范围在 0 到 Math.PI 弧度之间。默认为0。
fpControls.verticalMin = 1.0;

const loader = new OBJLoader();
loader.load(
  '/models/city/city.obj',
  obj => {
    // 生成渐变色条
    let scale = chroma.scale(['red', 'green', 'blue']);
    // 选择颜色
    setRandomColors(obj, scale);

    scene.add(obj)
  }  
)

render();

function render() {
  stats.update();
  fpControls.update(clock.getDelta());

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}